<template>
  <div>
    <p>A 节点</p>
    <button @click="() => changeColor()">改变 color 为 red</button>
    <hr />
    <children-b />
    <children-f />
  </div>
</template>

<script>
import ChildrenB from "./ChildrenB.vue";
import ChildrenF from "./ChildrenF.vue";

export default {
  components: { ChildrenB, ChildrenF },
  provide() {
    return {
      /* theme: {
        // color 是一个字符串，并非响应式
        color: this.color,
      }, */
      theme: this, // 响应式
    };
  },
  data() {
    return {
      color: "blue",
    };
  },
  methods: {
    changeColor(color) {
      if (color) {
        this.color = color;
      } else {
        this.color = this.color === "blue" ? "red" : "blue";
      }
    },
  },
};
</script>

<style scoped>
div {
  background-color: darkgrey;
  border-radius: 4px;
  padding: 10px;
}
</style>
